<!DOCTYPE html>
<html lang="en">
<head>
    qweqweqweqwe
    qweqwe 
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .dad{
            display: f;
            flex-direction: row;
            justify-content:flex-start;
            /* align-items 用于 item 只有<单行>时交叉轴上的对齐方式 */
            align-items:center;
            /* align-content 用于 item 有<多行>且 flex-wrap 为 no-wrap 时交叉轴两侧的对齐方式 */
            align-content:space-between;
            flex-wrap: wrap;
            width: 900px;
            height: 700px;
            background-color: pink;
        }
        .little-box{
            width: 200px;
            height: 200px;
            background-color: gray;
        }

    </style>
</head>
<body>
    <div class="dad">
        <div class="little-box"></div>
     
        <div class="little-box"></div>
        <div class="little-box long"></div>
        <div class="little-box"></div>
    </div>
</body>
</html>